<template>
  <div class="main_box">
    <el-row>
      <el-col :span="12">
        <Crumbs></Crumbs>
      </el-col>
      <el-col :span="12">
        <div class="opration_wrap">
          <el-button type="primary" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
      </div>
      <el-form :model="editForm" ref="editForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="字典值：" prop="dictValue" >
            <el-input v-model="editForm.dictValue"></el-input>
          </el-form-item>
          <el-form-item label="字典信息名称：" prop="dictLabel" >
            <el-input v-model="editForm.dictLabel"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark" >
            <el-input v-model="editForm.remark"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort" >
            <el-input v-model="editForm.sort"></el-input>
          </el-form-item>

          <el-form-item prop="typeId" label="类型ID：">
            <el-select v-model="editForm.typeId" @click="getTypeId" :clearable="true" placeholder="广告位">
              <el-option v-for="typeId in typeIds" :key="typeId" :label="typeId" :value="typeId"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="state" label="状态：">
            <el-select v-model="editForm.state" :clearable="true" placeholder="状态">
              <el-option key="0" label="禁用" value="0"></el-option>
              <el-option key="1" label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>

        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="sureClick">保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as validators from "@/utils/validators"
  import * as message from "@/constants/message"
  import Crumbs from "@/components/Crumbs"
  import Region from "@/components/Region"
  import Map from "@/components/Map"
  export default{
    data(){
      return {
        editForm:{
          dictValue:"",
          dictLabel:"",
          remark:"",
          sort:"",
          typeId:"",
          state:"",
        },
        typeIds:[],
        roleRules: {
          dictValue: [
            { required: true, message: "请输入字典值", trigger: "blur" }
          ],
          dictLabel: [
            { required: false, message: "字典信息名称", trigger: "blur" }
          ],
          remark: [
            { required: false, message: "请选择字典备注", trigger: "change" }
          ],
          sort: [
            { required: false, message: "请输入字典排序", trigger: "blur" }
          ],
          typeId: [
            { required: true, message: "请选择字典类型ID", trigger: "change" }
          ],
          state: [
            { required: true, message: "请选择字典状态", trigger: "change" }
          ],

        }
      }
    },
    components: {
      Crumbs,
      Region
    },
    methods: {
      int(){
        this.getData();
        this.getTypeId();
      },

      getData(){
        this.$Get(this.$Config.api.dictGet,{dictId:this.$route.query.id})
          .then(res => {
            this.$Utils.bindingBean(this.editForm, res.data);
          })
      },

      sureClick() {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                this.editDict();
              });
          }
        })
      },
      getTypeId(){
        this.$Get(this.$Config.api.dictListTypeId)
          .then(res => {
            this.typeIds = res.data;
          })
      },
      editDict() {
        let data = {
          dictValue: this.editForm.dictValue,
          dictLabel: this.editForm.dictLabel,
          remark: this.editForm.remark,
          sort: this.editForm.sort,
          typeId: this.editForm.typeId,
          state: this.editForm.state,
          dictId: this.$route.query.id
        };
        this.$Put(this.$Config.api.dictUpdate, data)
          .then(data => {
            this.$notify.success({
              title: message.TITLE_SUCCESS,
              message: message.MSG_ACTION_SUCCESS
            });
            this.returnList();
          })
          .catch(error => {
            if (error.msg) {
              this.$notify.error({
                title: message.TITLE_ERROR,
                message: error.msg
              });
            }
          })
      },

      returnList(){
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/sys/dictManagement'})
      }
    },


    mounted(){
      this.int();
    }
  }
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
